<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   *{
        margin: 0;
        padding: 0;
}
        .btn{
            position: absolute;
            top: 300px;
            right: 700px;
            display: block;
            width: 100px;
            height: 50px; 
            background-color: #ccc;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        #login{
            z-index: 3;
            width: 500px;
            height: 500px;
            border: 1px solid #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #fff;
        }
        .close{
            position: absolute;
            top: 10px;
            right: 20px;
            display: block;
            width: 80px;
            height: 40px;border: 1px solid #666;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
 
        }
        #BG{
            background-color: rgba(0,0,0,0.6);
            z-index: 2;
        }
        
    </style>
</head>
<body>
    
    <span class="btn" id="BTN">获取登录端口
  
    </span>
        <script >    
        function openlogin(){    
            var sWidth=window.screen.width;
            var sHeight=window.screen.height;
            var BG = document.createElement("div");
                BG.id = "BG";
                BG.style.height=sHeight + "px";
                BG.style.width=sWidth + "px";
                document.body.appendChild(BG);
            var login = document.createElement("div");
            var login = document.createElement("span");
            var login = document.createElement("button");
                login.id="login";
                login.innerHTML = '用户名：<input type="text" id="username" display="block"<br >';
                // login.innerHTML = '密码：<input type="text" id="username" display="block"';
                // login.innerHTML = "<input type='button' value='验证' id='btn'>";
               
                document.body.appendChild(login);
                var login = document.createElement("div");
                login.id="login";
            // var close = document.getElementById("CLOSE");
            //     close.onclick  =  BG.onclick = function(){
            //     document.body.removeChild(BG);
            //     document.body.removeChild(login);
            //     };
        };
        window.onload = function(){
            var btn = document.getElementById("BTN");
            btn.onclick=function(){
                openlogin();
                return false;
            }
        }
        // 用户名验证
        function guorong(){
            var username = document.querySelector('#username');
        var btn = document.querySelector('#btn');
        btn.onclick = function () {
            var reg = /^ [0-9]*$ a-z{2,14}$/i;
            // 验证 用户名是否是 英文或者 汉字组成
            var res = reg.test(username.value);
            if (res) {
                // 判断 用户名长度 把是中文的用两个英文替换
                var len = username.value.replace(/[\u4e00-\u9fa5]/g, 'zz');
                // 在判断 字符串的长度 是否大于14，如果大于14 用户名长度 验证失败
                if (len.length > 14) {
                    alert('用户名长度只能为7个汉字或者14个英文')
                } else {
                    alert('验证成功')
                }
            } else {
                alert('验证失败')
            }
        }
        }
        guorong();
        function mima(){
            var username = document.querySelector('#username');
        var btn = document.querySelector('#btn');
        btn.onclick = function () {
            var reg = /^ [0-9]*$ a-z{2,14}$/i;
            // 验证 用户名是否是 英文或者 汉字组成
            var res = reg.test(username.value);
            if (res) {
                // 判断 用户名长度 把是中文的用两个英文替换
                var len = username.value.replace(/[\u4e00-\u9fa5]/g, 'zz');
                // 在判断 字符串的长度 是否大于14，如果大于14 用户名长度 验证失败
                if (len.length > 14) {
                    alert('用户名长度只能为7个汉字或者14个英文')
                } else {
                    alert('验证成功')
                }
            } else {
                alert('验证失败')
            }
        }
        }
        guorong();
</script>
</body>
</html>